<template>
  <div class="app-container">
    <!-- 操作按钮栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
    </el-row>

    <!-- 数据表格 -->
    <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">

      <el-table-column label="栏目名称" align="center" prop="columnName" />
      <el-table-column label="排序" align="center" prop="sortOrder" />
      <el-table-column label="首页推荐文章" align="center" width="500">
        <template slot-scope="scope">
            <div class="tag-container">
                <template v-if="scope.row.contactList && scope.row.contactList.length > 0">
                    <el-tag v-for="(item) in scope.row.contactList" :key="item.recommendArticleId" closable @click="handleEditUser(item.recommendArticleId)" @close="deleteUser(item.recommendArticleId)">
                              {{ item.publishTime ? item.publishTime.split(' ')[0] : '-'  }} {{ item.articleName }} {{ item.sortOrder }}
                    </el-tag>
                </template>
            </div>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding" width="300px">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button size="mini" type="primary" @click="handleDelete(scope.row)">删除</el-button>
          <el-button size="mini" type="primary" @click="handleInsert(scope.row)">添加推荐文章</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <!-- 新增/修改推荐栏目弹窗 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="RecommendColumnform" :model="RecommendColumnform" :rules="rules" label-width="80px">
        <el-form-item label="选择栏目" prop="columnId">
          <el-select v-model="RecommendColumnform.columnId" placeholder="请选择栏目" @change="handleColumnChange" :disabled="title === '修改推荐栏目文章'">
            <el-option v-for="column in availableColumnList || []" :key="column.columnId" :label="column.columnName"
              :value="column.columnId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="sortOrder">
          <el-input v-model.number="RecommendColumnform.sortOrder" placeholder="请输入排序号" type="number" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('RecommendColumnform')">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 新增/修改推荐文章弹窗 -->
    <el-dialog :title="contactTitle" :visible.sync="openContact" width="500px" append-to-body>
      <el-form ref="recommendArticleform" :model="recommendArticleform" :rules="rules" label-width="80px">
        <!-- 时间选择器：绑定change事件 -->
        <el-form-item label="发布时间" prop="publishTime">
          <el-date-picker v-model="recommendArticleform.publishTime" type="datetimerange" start-placeholder="开始日期"
            end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" @change="handleTimeRangeChange">
          </el-date-picker>
        </el-form-item>

        <!-- 文章选择器：绑定change事件 -->
        <el-form-item label="选择文章" prop="articleId">
          <el-select v-model="recommendArticleform.articleId" placeholder="请选择推荐文章" @change="handleArticleSelect">
            <el-option v-for="article in recommendArticles || []" :key="article.articleId" :label="article.articleName"
              :value="article.articleId"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="排序" prop="sortOrder">
          <el-input v-model.number="recommendArticleform.sortOrder" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handlePreview">预览</el-button>
        <el-button type="primary" @click="submitContact('recommendArticleform')">保 存</el-button>
        <el-button @click="openContact = false">取 消</el-button>
      </div>
    </el-dialog>

    <div class="app-container">
      <!-- 推荐文章预览组件 -->
      <recommendArticlePreview :article="previewArticle" :visible.sync="previewVisible"></recommendArticlePreview>
    </div>
  </div>
</template>

<script>
import {
  addRecommendArticle,
  selectArticle,
  deleteRecommendArticle,
  editRecommentArticle,
  selectAllArticles
} from '@/api/publish/recommend/recommendArticle'
import {
  addRecommendColumn,
  deleteRecommendColumn,
  updateRecommendColumn,
  selectRecommendColumnList,
  selectColumnName,
} from '@/api/publish/recommend/recommendColumn'
import recommendArticlePreview from "./recommendArticlePreview.vue";



export default {
  name: "ContactRecommendColumn",
  components: {
    recommendArticlePreview
  },
  data() {
    return {
      ids: [],
      value1: [], // 存储时间区间
      single: true,
      multiple: true,
      total: 0,
      postList: [],
      loading: false,
      title: "",
      open: false,
      openContact: false,
      previewLoading: false, // 独立控制预览的加载状态
      contactTitle: "",
      previewArticle: {}, // 存储预览的文章数据（初始化为空对象）
      previewVisible: false, // 控制预览弹窗显示/隐藏（初始为false）
      addedColumnIds: [], // 存储已添加的栏目ID（核心新增）
      originalColumnList: [], // 存储原始栏目列表（不被修改）
      availableColumnList: [], // 存储过滤后的可用栏目列表
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        columnName: undefined
      },
      recommendArticles: [], // 推荐文章列表
      columnList: [], // 存储二级栏目数据
      addedColumnIds: [], // 存储已添加的栏目ID
      articleToColumnMap: new Map(), // 存储文章ID到栏目ID的映射
      RecommendColumnform: {
        recommendId: null,
        columnId: null,
        columnName: '',
        sortOrder: 0,
      },
      recommendArticleform: {
        recommendArticleId: null,
        recommendId: null,
        articleName: '',
        sortOrder: 0,
        articleId: null,
        publishTime: undefined,
        columnId: null
      },
      rules: {
        sortOrder: [
          { required: true, message: "排序不能为空", trigger: "blur" },
          { type: 'number', message: "排序必须为数字", trigger: "blur" }
        ],
        publishTime: [
          { required: true, message: "请选择发布时间区间", trigger: "change" }
        ],
        articleId: [
          { required: true, message: "请选择文章", trigger: "change" }
        ]
      }
    };
  },
  created() {
    this.getList();
    this.getColumnList();//加载栏目列表
     // 初始化已添加的栏目ID
    this.addedColumnIds = this.postList.map(item => item.columnId).filter(Boolean);
    this.filterColumnList();
  },
  methods: {
    // 获取表格数据
    getList() {
      this.loading = true;
      selectRecommendColumnList(this.queryParams).then(response => {
        this.postList = response.rows.map(row => ({
          recommendId: row.recommendId || '',
          columnId: row.columnId || '',
          columnName: row.columnName || '未知栏目',
          sortOrder: row.sortOrder || 0,
        }));
        this.total = response.total || 0;
        // 关键：更新已添加的栏目ID（确保 postList 已加载）
        this.addedColumnIds = this.postList.map(item => item.columnId).filter(Boolean);
        this.filterColumnList(); // 重新过滤可用栏目

        // 加载每个栏目的推荐文章
        this.postList.forEach(RecommendColumn => {
          this.loadContactList(RecommendColumn.recommendId, RecommendColumn);
        });
        this.loading = false;
      }).catch(error => {
        this.$message.error('加载失败：' + error.message);
        this.loading = false;
      });
    },
    // 处理栏目选择变化
    handleColumnChange(columnId) {
      console.log('栏目ID变更为：', columnId);
    },
    // 文章选择改变事件
    handleArticleSelect(newArticleId) {
      const selectedArticle = this.recommendArticles.find(
        item => item.articleId === newArticleId
      );
      if (selectedArticle) {
        this.recommendArticleform.articleId = newArticleId;
        this.recommendArticleform.articleName = selectedArticle.articleName;
      }
    },
    //获得栏目名
    getColumnList(){
        selectColumnName().then(response=>{
            this.columnList = response.data || [];
            this.originalColumnList = [...this.columnList]; // 初始化原始列表
            //过滤已添加的栏目
            this.filterColumnList();
        }).catch(error=>{
            this.$message.error('获取二级栏目失败：' + error.message);
        })
    },
    // 过滤栏目列表
    filterColumnList() {
        if (!this.originalColumnList) {
            this.originalColumnList = [...this.columnList]; // 深拷贝原始数据
           }
   // 根据已添加的栏目ID过滤，生成可用栏目列表
        this.availableColumnList = this.originalColumnList.filter(column => 
            !this.addedColumnIds.includes(column.columnId)
        );
    },
    
    // 加载栏目下的推荐文章
    loadContactList(recommendId, RecommendColumn) {
      if (!recommendId) {
        this.$message.error('栏目ID不能为空');
        return;
      }
      selectArticle(recommendId).then(response => {
        console.log("接口返回的推荐文章：", response.data);
        const uniqueContactList = [...new Map(
          response.data.map(item => [item.recommendArticleId, item])
        ).values()];
        this.$set(RecommendColumn, 'contactList', uniqueContactList);
        const index = this.postList.findIndex(row => row.recommendId === recommendId);
        if (index !== -1) {
          this.$set(this.postList, index, RecommendColumn);
        }
        //是否包含新文章
        console.log("当前栏目推荐文章：", uniqueContactList);
      }).catch(error => {
        this.$message.error(`获取栏目文章失败: ${error.message}`);
      });
    },

    // 日期格式化
    formatDate(date) {
      const d = typeof date === 'number' ? new Date(date) : new Date(date);
      if (isNaN(d.getTime())) {
        console.error('无效日期：', date);
        return null;
      }
       return [
        d.getFullYear(),
        String(d.getMonth() + 1).padStart(2, '0'),
        String(d.getDate()).padStart(2, '0')
    ].join('-') + ' ' + 
    [
      String(d.getHours()).padStart(2, '0'),
      String(d.getMinutes()).padStart(2, '0'),
      String(d.getSeconds()).padStart(2, '0')
    ].join(':')
    },

    // 时间区间改变事件（核心：加载文章列表）
    handleTimeRangeChange(newTime) {
      this.value1 = newTime; // 更新时间区间
      if (this.openContact && newTime.length === 2) {
        if (newTime[0].getTime() === newTime[1].getTime()) {
          const start = new Date(newTime[0]);
          start.setHours(0, 0, 0, 0);
          const end = new Date(newTime[0]);
          end.setHours(23, 59, 59, 999);
          this.value1 = [start, end];
        }
        this.loadRecommendArticles();
      }
    },



    // 文章选择改变事件
    handleArticleSelect(newArticleId) {
      const selectedArticle = this.recommendArticles.find(
        item => item.articleId === newArticleId
      );
      if (selectedArticle) {
        this.recommendArticleform.articleName = selectedArticle.articleName;
      }
    },

    // 重置表单
    reset() {
      this.RecommendColumnform = {
        recommendId: null,
        columnName: '',
        sortOrder: 0
      };
      if (this.$refs.RecommendColumnform) {
        this.$refs.RecommendColumnform.resetFields();
      }
    },

    // 取消弹窗
    cancel() {
      this.open = false;
      this.reset();
    },

    // 表格多选事件
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.recommendId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },

    // 新增推荐栏目
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加推荐栏目文章";
      this.RecommendColumnform={
        recommendId: null,
        columnId: null, 
        columnName: '',
        sortOrder: 0
      }
    },

    // 修改推荐栏目
    handleUpdate(row) {
      this.reset();
      this.RecommendColumnform = {
        recommendId: row.recommendId,
        columnId: row.columnId, // 绑定当前栏目ID（用于下拉框回显）
        columnName: row.columnName,
        sortOrder: row.sortOrder || 0
      };
      this.open = true;
      this.title = "修改推荐栏目文章";
    },

    // 提交推荐栏目表单
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const requestFn = this.RecommendColumnform.recommendId
            ? updateRecommendColumn
            : addRecommendColumn;

          requestFn(this.RecommendColumnform).then(response => {
            this.$message.success(`${this.RecommendColumnform.recommendId ? '修改' : '新增'}成功`);
            this.open = false;
            this.getList();
            // 更新已添加的栏目ID并重新过滤
            this.addedColumnIds = this.postList.map(item => item.columnId).filter(Boolean);
            this.filterColumnList();
          }).catch(error => {
            this.$message.error(`${this.RecommendColumnform.recommendId ? '修改' : '新增'}失败：${error.message}`);
          });
        }
      });
    },

    // 删除推荐栏目
    handleDelete(row) {
      const recommendId = row.recommendId;
      const columnName = row.columnName;
      const columnId = row.columnId; // 获取要删除的栏目ID
      this.$confirm(`是否确认删除 "${columnName}"?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRecommendColumn(recommendId).then(() => {
          this.$message.success("删除成功");
           // 从 addedColumnIds 中移除已删除的栏目ID
          this.addedColumnIds = this.addedColumnIds.filter(id => id !== columnId);
          this.getList();
           // 更新已添加的栏目ID
          this.addedColumnIds = this.postList.map(item => item.columnId).filter(Boolean);
           // 重新过滤下拉列表
          this.filterColumnList();
        }).catch(error => {
          this.$message.error("删除失败：" + error.message);
        });
      }).catch(() => { });
    },
    // 编辑推荐文章
    handleEditUser(recommendArticleId) {
        // 查找包含该文章的栏目
        const column = this.postList.find(row => 
            row.contactList.some(item => item.recommendArticleId === recommendArticleId)
        );
        
        if (!column) {
            this.$message.error("未找到对应栏目");
            return;
        }
        if (!column.contactList) {
            column.contactList = [];
         }
      // 初始化表单数据
      this.currentRecommendColumn = column;
      this.loadRecommendArticles().then(() => {
        this.recommendArticleform = {
          recommendArticleId: article.recommendArticleId,
          recommendId: column.recommendId,
          articleId: article.articleId,
          articleName: article.articleName,
          sortOrder: article.sortOrder,
          publishTime: article.publishTime,
          columnId: column.columnId
        };

      });
      // 打开编辑弹窗
      this.contactTitle = "编辑推荐文章";
      this.openContact = true;
    },

    // 删除推荐文章
    deleteRecommendArticle(recommendArticleId) {
        //查找包含该文章的栏目
        const columnIndex = this.postList.findIndex(row => 
            row.contactList.some(item => item.recommendArticleId === recommendArticleId)
        );
        
        if (columnIndex === -1) {
            this.$message.error("未找到对应栏目");
            return;
        }
        
        const column = this.postList[columnIndex];
         //获取文章在列表中的索引位置
        const articleIndex = column.contactList.findIndex(item => 
            item.recommendArticleId === recommendArticleId
        );
        
        if (articleIndex === -1) {
            this.$message.error("未找到对应推荐文章");
            return;
        }

        const article = column.contactList[articleIndex];

      if (!userItem.recommendArticleId) {
        this.$message.error("文章ID不存在，无法删除");
        return;
      }
      this.$confirm(
        `确定要删除文章 "${userItem.articleName}"吗？`,
        "删除确认",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        deleteRecommendArticle(recommendArticleId).then(response => {
          this.$message.success("删除成功");
          column.contactList.splice(articleIndex, 1);
          this.$set(this.postList, columnIndex, column); // 更新视图
          
        }).catch(error => {
          const errorMsg = error.response?.data?.msg || error.message;
        this.$message.error(`删除失败：${errorMsg}`);
        });
      }).catch(() => {
        this.$message.info("已取消删除");
      });
    },

    // 打开新增推荐文章弹窗
    handleInsert(row) {
            if (!row.contactList) {
            row.contactList = [];
        }
      this.contactTitle = "新增推荐文章";
      this.currentRecommendColumn = JSON.parse(JSON.stringify(row));
       // 确保 contactList 存在（避免空值错误）
      if (!this.currentRecommendColumn.contactList) {
        this.currentRecommendColumn.contactList = [];
      }

      //重置表单数据
      this.recommendArticleform = {
        recommendArticleId: null,
        recommendId: row.recommendId,
        articleName: '',
        sortOrder: 0,
        articleId: null,
        publishTime: undefined,
        columnId: row.columnId // 关联当前栏目ID
      };
      this.value1 = []; // 清空时间选择器
      this.recommendArticles = []; // 清空文章列表
      this.openContact = true;
       this.$nextTick(() => {
    if (this.value1 && this.value1.length === 2) {
      this.loadRecommendArticles();
    }
  });
    },

    // 提交推荐文章表单
    submitContact(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
            //  确保当前栏目存在
            if (!this.currentRecommendColumn || !this.currentRecommendColumn.contactList) {
                this.$message.error("未找到当前栏目信息，无法提交");
                return;
            }

               // 仅校验当前操作的栏目
          const currentColumn = this.currentRecommendColumn;
          const isArticleExists = currentColumn.contactList.some(
            item => item.articleId === this.recommendArticleform.articleId
          );
 
            if (isArticleExists) {
            this.$message.error("该文章已在当前栏目推荐列表中，请勿重复添加");
            return; // 阻止提交
            }
            
          // 确保recommendId正确传递
          this.recommendArticleform.recommendId = this.currentRecommendColumn.recommendId;
          this.recommendArticleform.columnId = this.currentRecommendColumn.columnId;
          const [start, end] = this.recommendArticleform.publishTime;
          this.recommendArticleform.publishTime = start ? this.formatDate(start) : null;

          // 区分新增/修改接口
          const requestFn = this.recommendArticleform.recommendArticleId
            ? editRecommentArticle
            : addRecommendArticle;

          // 调用接口提交数据
          requestFn(this.recommendArticleform)
            .then(response => {
              this.$message.success("新增成功");
              this.openContact = false; // 关闭弹窗
              // 重新加载当前栏目的推荐文章列表
              this.loadContactList(this.currentRecommendColumn.recommendId, this.currentRecommendColumn);
             

              // 重新加载当前栏目下的推荐文章，确保新增/修改后的数据实时显示
              if (this.currentRecommendColumn) {
                console.log("开始刷新推荐文章列表...");
                this.loadContactList(
                  this.currentRecommendColumn.recommendId,
                  this.currentRecommendColumn
                );
              }
            })
            .catch(error => {
              const errorMsg = error.response?.data?.msg || error.message;
              this.$message.error(`${this.recommendArticleform.recommendArticleId ? '修改' : '新增'}失败：${errorMsg}`);
            });
        }
      });
    },

    // 删除推荐文章
    deleteUser(recommendArticleId) {
       // 查找包含该文章的栏目
        const columnIndex = this.postList.findIndex(row => 
            row.contactList.some(item => item.recommendArticleId === recommendArticleId)
        );
        
        if (columnIndex === -1) {
            this.$message.error("未找到对应栏目");
            return;
        }
        
        const column = this.postList[columnIndex];

        // 获取文章在列表中的索引位置
        const articleIndex = column.contactList.findIndex(item => 
            item.recommendArticleId === recommendArticleId
        );
        
        if (articleIndex === -1) {
            this.$message.error("未找到对应推荐文章");
            return;
        }

        const article = column.contactList[articleIndex];
      this.$confirm(
        `确定要删除推荐文章"${article.articleName}"吗？`,
        "删除确认",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        deleteRecommendArticle(recommendArticleId)
          .then(response => {
            this.$message.success("删除成功");
            // 从当前栏目列表中移除该文章
            column.contactList.splice(articleIndex, 1);
            // 触发视图更新
            this.$set(this.postList, columnIndex, column);
          })
          .catch(error => {
            const errorMsg = error.response?.data?.msg || error.message;
            this.$message.error(`删除失败：${errorMsg}`);
          });
      }).catch(() => {
        this.$message.info("已取消删除");
      });
    },

    // 加载推荐文章列表
    loadRecommendArticles() {
      if (!this.value1 || this.value1.length !== 2) {
        this.$message.warning("请选择完整的时间区间");
         return Promise.reject("时间区间不完整"); 
      }

       // 确保当前栏目存在
        if (!this.currentRecommendColumn) {
            this.$message.error("未找到当前栏目信息");
            return Promise.reject("栏目信息不存在");
        }
        //强制获取当前栏目的columnId
        const currentColumnId = this.currentRecommendColumn.columnId;
        if (!currentColumnId) {
          this.$message.error("当前栏目ID不存在，无法加载文章");
          return Promise.reject("栏目ID为空");
        }

        // 仅排除【当前栏目】已添加的文章ID
        const excludeArticleId = this.currentRecommendColumn.contactList
            ? this.currentRecommendColumn.contactList
                .map(item => item.articleId)
            : [];
    
      const startDate = this.formatDate(this.value1[0]);
      const endDate = this.formatDate(this.value1[1]);
      
      // 调用接口加载文章列表
      return selectAllArticles({
        columnIdList: [currentColumnId], 
        startDate: startDate,
        endDate: endDate,
        excludeArticleId: excludeArticleId,
        excludeRecommended: false
      }).then(response => {
         console.log('接口返回文章数据：', response.data);
        this.recommendArticles = response.data || [];
         // 只有在新增/编辑弹窗打开时，且无文章才提示
        if (this.openContact && this.recommendArticles.length === 0) {
          this.$message.info("该时间区间内无符合条件的文章");
        }
        return response;
      }).catch(error => {
        this.$message.error("加载文章列表失败：" + error.message);
        return Promise.reject(error);
      });
    },

    // 日期格式化
    formatDate(date) {
      if (!date) return null;
      // 处理时间戳或Date对象
      const d = typeof date === 'number' ? new Date(date) : new Date(date);
      if (isNaN(d.getTime())) {
        console.error('无效日期：', date);
        return null;
      }
      // 格式化为：yyyy-MM-dd 
      return [
        d.getFullYear(),
        String(d.getMonth() + 1).padStart(2, '0'),
        String(d.getDate()).padStart(2, '0')
      ].join('-')+ ' ' + [
    String(d.getHours()).padStart(2, '0'),
    String(d.getMinutes()).padStart(2, '0'),
    String(d.getSeconds()).padStart(2, '0')
  ].join(':');
    },
    // 预览文章页面
    handlePreview() {
      const recommendForm = this.recommendArticleform || {};
      let articleId = recommendForm.articleId;

      if (articleId === null || articleId === undefined) {
        this.$message.error('请先选择文章');
        return;
      }

      const articleIdStr = articleId.trim();
      if (!/^\d+$/.test(articleIdStr)) {
        this.$message.error('文章ID格式错误（必须是数字）');
        return;
      }

      this.previewArticle = {};
      this.previewLoading = true;

      // 调用接口
      selectArticle(articleIdStr)
        .then((response) => {
          const data = response.data || {};
          // 处理返回数据
          if (data.articleId) {
            this.previewArticle = data;
          } else if (Array.isArray(data) && data.length > 0) {
            this.previewArticle = data[0]; // 如果返回数组，取第一个元素
            console.warn('警告：接口返回数组而非单篇文章对象');
          } else {
            this.$message.warning('未找到文章数据');
            return;
          }

          this.previewVisible = true;
        })
        .catch((error) => {
          this.$message.error(`获取文章数据失败：${error.message}`);
          this.previewVisible = false;
        })
        .finally(() => {
          this.previewLoading = false;
        });
    }
  }
};
</script>
<style scoped>
.tag-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  grid-gap: 8px; /* 标签之间的间距 */
  padding: 5px 0; /* 增加内边距，优化间距 */
}
.tag-container .el-tag {
  width: 100%;
  box-sizing: border-box;
}
/* 表格行高自适应 */
::v-deep .el-table__row {
  height: auto !important; /* 覆盖默认行高，允许自适应 */
}
/* 表格单元格自适应内容高度 */
::v-deep .el-table__cell {
  padding: 12px 0 !important; /* 增加单元格内边距 */
  height: auto !important; /* 单元格高度随内容变化 */
  white-space: normal; /* 允许内容自动换行 */
}
::v-deep .el-tag {
  min-width: 200px;
  max-width: 100%; /* 允许标签宽度自适应容器，避免横向溢出 */
  white-space: normal; /* 强制内容换行 */
  padding: 6px 12px;
  margin: 0 8px 8px 0;
  height: auto; /* 标签高度随内容变化 */
}
</style>
